<template>
  <div class="data-set">
    <div class="header">
      <div class="header-content-box">
        <div class="header-left">
          <div class="title">数据集</div>
        </div>
        <div class="header-right">
          <div class="action-box">
            <div class="header-button basebtn">
              <button class="basebtn-common lan" @click="createDataset">上传数据集</button>
            </div>
          </div>
        </div>
      </div>
      <ul class="nav-list">
        <li class="main-nav-list nav-left clearfix">
          <ul class="main-nav-list-container">
            <li class="nav-item link-item" :class="{'active': activeTab === 1}" @click="toggleActive(1)">
              <i class="icon icon-open-ico"></i>
              公开数据集
              </li>
            <li class="nav-item link-item" :class="{'active': activeTab === 2}" @click="toggleActive(2)">
              <i class="icon icon-my-ico"></i>
              我的数据集
              </li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="content">
      <div v-if="activeTab === 1">
        <div class="category-header">
          <ul>
            <li class="category-item" :class="{'active-category': curSelectedCategory === 'ALL'}" @click="selectAll">全部</li>
            <li class="category-item" :class="{'active-category': curSelectedCategory === item.id}" v-for="item in topFive" :key="item.id" @click="selectFilterLabel(item)">{{item.name}}</li>
            <li class="category-item">
              <el-popover
                placement="bottom"
                trigger="click"
                v-model="labelVisible"
                width="800">
                <div class="dataset-popover">
                  <ul class="navs-detail-left">
                    <li class="item" :class="{ 'active': openAllLabelIndex == index}" v-for="(item, index) in openAllLabel" :key="item.id" @click="showSeLabel(index)">{{item.name}}</li>
                  </ul>
                  <ul class="navs-detail-right">
                    <li class="items" v-for="(item) in openAllLabelShow" :key="item.id">
                      <h4 class="tit">{{item.name}}</h4>
                      <ul class="detail-items">
                        <li class="detail-item" :class="{'active-category': curSelectedCategory === list.id}" v-for="(list, num) in item.childList" :key="num" @click="selectFilterLabel(list)">{{list.name}}</li>
                      </ul>
                    </li>
                  </ul>
                </div>
                <div class="dataset-navs-detail" slot="reference" @click="labelVisible = !labelVisible">
                  <span>更多分类</span>
                </div>
              </el-popover>
            </li>
            <li class="datast-total">共{{totalNum}}个数据集</li>
          </ul>
        </div>
        <load-data v-show="loadState"></load-data>
        <ul class="data-list">
          <li class="item" v-for="(item, index) in publicData" :key="index" @click="toDetail(item)">
            <div class="img-wra">
              <img class="image" :src="item.coverUrl ? item.coverUrl : dattSetImgUrl">
              <ul class="category">
                <li class="list" v-for="(list, ind) in item.categoryList" :key="ind" v-show="ind < 2">{{list.name}}</li>
              </ul>
            </div>
            <h4 class="name-pro">{{ item.name }}</h4>
            <p class="desc">{{ item.profile }}</p>
            <ul class="tag-types">
              <li class="types">
                <i class="icon-type"></i>
                <span class="txt">{{item.userProjectCount}}次使用</span>
              </li>
              <li class="types">
                <i class="icon-type icon-type2"></i>
                <span class="txt">{{item.userProjectAttentionCount}}关注</span>
              </li>
            </ul>
          </li>
          <!-- <li v-for="item in publicData" class="item" :key="item.id" @click="toDetail(item)">
            <div class="tag">
              <img :src="item.coverUrl ? item.coverUrl : dattSetImgUrl">
              <div class="tag-right">
                <div class="title-right-header">
                  <span class="title">{{item.name}}</span>
                  <span class="username">{{item.userName}}</span>
                </div>
                <p class="desc">{{item.profile}}</p>
                <p class="tag-footer">
                  <span class="tag-footer-use">
                    <img class="tag-icon" src="@/common/image/icon/use-num.png">
                    <span class="tag-icon-text">{{item.userProjectCount}}次使用</span>
                    <img class="tag-icon" src="@/common/image/icon/star.png">
                    <span>{{item.userProjectAttentionCount}}关注</span>
                  </span>
                  <span class="tag-footer-category">
                    <span v-for="(tagItem, index) in item.categoryList" :key="tagItem.id" v-show="index < 2"><i class="circle"></i>{{tagItem.name}}</span>
                  </span>
                </p>
              </div>
            </div>
          </li> -->
        </ul>
        <div class="loadmore" v-if="!loadState && hasNextPagePublic">
          <p class="loadmore-box" @click="loadMorePublic">
            <i v-show="loadingMorePublic" class="el-icon-loading"></i>
            <span v-show="!loadingMorePublic">加载更多...</span>
          </p>
        </div>
        <div class="no-data-box" v-show="!loadState && publicData.length === 0">
          <div class="no-data">
            <img src="@/common/image/nocontent.png">
            <p class="no-data-title">暂无数据</p>
          </div>
        </div>
      </div>
      <div v-if="activeTab === 2">
        <div class="category-header">
          <ul>
            <li class="category-item" :class="{'active-category': curSelectedMyDataSet === ''}" @click="selectDataSetType('')">全部</li>
            <li class="category-item" :class="{'active-category': curSelectedMyDataSet === 0}" @click="selectDataSetType(0)">我上传的</li>
            <li class="category-item" :class="{'active-category': curSelectedMyDataSet === 1}" @click="selectDataSetType(1)">我关注的</li>
          </ul>
        </div>
        <load-data v-show="loadState"></load-data>
        <ul class="data-list">
          <li class="item" v-for="(item, index) in myData" :key="index" @click="toDetail(item)">
            <div class="img-wra">
              <img class="image" :src="item.coverUrl ? item.coverUrl : dattSetImgUrl">
              <ul class="category">
                <li class="list" v-for="(list, ind) in item.categoryList" :key="ind" v-show="ind < 2">{{list.name}}</li>
              </ul>
            </div>
            <h4 class="name-pro">{{ item.name }}</h4>
            <p class="desc">{{ item.profile }}</p>
            <ul class="tag-foot">
              <li class="foot-item">
                <i class="icon-foot-item" :class="{'icon-foot-item-pri': item.type === 0}"></i>
                <span v-if="item.type === 1" class="txt">公开</span>
                <span v-if="item.type === 0" class="txt">私有</span>
              </li>
              <li class="foot-item">
                <i class="icon-foot-item icon-foot-item-num"></i>
                <span class="txt">{{item.userProjectCount}}次使用</span>
              </li>
            </ul>
          </li>
          <!-- <li v-for="(item, index) in myData" class="item" :key="index" @click="toDetail(item)">
            <div class="tag">
              <img :src="item.coverUrl ? item.coverUrl : dattSetImgUrl">
              <div class="tag-right">
                <div class="title">{{item.name}}</div>
                <p class="desc">{{item.profile}}</p>
                <p class="tag-footer">
                  <span v-if="item.type === 1"><img class="tag-icon" src="@/common/image/icon/open.png"><span>公开</span></span>
                  <span v-if="item.type === 0"><img class="tag-icon" src="@/common/image/icon/private.png"><span>私有</span></span>
                  <span>
                    <img class="tag-icon" src="@/common/image/icon/use-num.png"><span>{{item.userProjectCount}}次使用</span>
                  </span>
                </p>
              </div>
            </div>
          </li> -->
        </ul>
        <div class="loadmore" v-if="!loadState && hasNextPage">
          <p class="loadmore-box" @click="loadMore">
            <i v-show="loadingMore" class="el-icon-loading"></i>
            <span v-show="!loadingMore">加载更多...</span>
          </p>
        </div>
        <div class="no-data-box" v-show="!loadState && myData.length === 0">
          <div class="no-data">
            <img src="@/common/image/nocontent.png">
            <p class="no-data-title">暂无数据</p>
          </div>
        </div>
      </div>
    </div>
    <div class="project-mask" v-show="labelVisible" @click="labelVisible=!labelVisible"></div>
  </div>
</template>

<script>
import { optionalDataSetExceptOwn, getDataSet, getUserDataSet } from '@/api/dataset'
import { getTopFiveRelationCategory, getCategoryTreeByType } from '@/api/category'
import dataSetImg from '@/common/image/dataset.jpg'
import { mapGetters, mapMutations } from 'vuex'
import loadData from '@/base/load'
import qs from 'qs'
export default {
  data () {
    return {
      // 标签集合显示
      labelVisible: false,
      // 标签树分类 index
      openAllLabelIndex: 0,
      // 数据集默认图片
      dattSetImgUrl: dataSetImg,
      // 总页数
      totalPage: 0,
      // 每页条数
      pageSize: 18,
      // 当前页
      pageNumber: 1,
      // 总页数
      totalPagePublic: 0,
      // 每页条数
      pageSizePublic: 18,
      // 当前页
      pageNumberPublic: 1,
      publicData: [],
      myData: [],
      // 是否有下一页
      hasNextPage: false,
      selecttagid: -999,
      hasNextPagePublic: false,
      loadingMore: false,
      loadingMorePublic: false,
      bottom: false,
      finished: false,
      totalNum: '--',
      topFive: [],
      // 标签分类树信息
      openAllLabel: [],
      // 标签树分类显示
      openAllLabelShow: [],
      curSelectedMyDataSet: '',
      // 数据加载过程
      loadState: true
    }
  },
  computed: {
    ...mapGetters([
      'taskDataSet'
    ]),
    // 当前激活Tab页
    activeTab: {
      get: function () {
        if (this.$route.query.active) {
          return Number(this.$route.query.active)
        } else {
          return 1
        }
      }
    },
    // 当前选择category
    curSelectedCategory: {
      get: function () {
        if (this.$route.query.category && this.$route.query.category !== 'ALL') {
          return Number(this.$route.query.category)
        } else {
          return 'ALL'
        }
      }
    }
  },
  methods: {
    // tab页切换
    toggleActive (val) {
      if (val === 1) {
        this.publicData = []
        this.pageNumberPublic = 1
        this.hasNextPagePublic = false
        this.$router.push({ path: '/dataset', query: { active: 1, category: 'ALL' } })
        this.selecttagid = -999
        this._getPublicDataSetList()
        this._getTopFiveRelationCategory()
        this._getCategoryTreeByType()
      } else {
        this.curSelectedMyDataSet = ''
        this.myData = []
        this.pageNumber = 1
        this.hasNextPage = false
        this.$router.push({ path: '/dataset', query: { active: 2 } })
        // this._getDataSetList()
        this._getUserDataSet('')
      }
    },
    toDetail (item) {
      // vuex存储this.activeTab，用于在详情中区分公开数据集和我的数据集
      item.activeTab = this.activeTab
      this.storeDataSet(item)
      this.$router.push(`/dataset/detail`)
    },
    // 创建数据集
    createDataset () {
      this.$router.push('/dataset/create')
    },
    // 加载更多
    loadMore () {
      this.loadingMore = true
      this.pageNumber++
      if (this.curSelectedMyDataSet === 0) {
        this._getDataSetList()
      } else {
        this._getUserDataSet(this.curSelectedMyDataSet)
      }
    },
    loadMorePublic () {
      this.loadingMorePublic = true
      this.pageNumberPublic++
      this._getPublicDataSetList()
    },
    // 处理滚动事件
    handleScroll () {
      let footerHeight = document.getElementById('footer').clientHeight
      let scrollY = window.scrollY
      let visible = document.documentElement.clientHeight
      let pageHeight = document.documentElement.scrollHeight - (footerHeight / 2)
      let bottomOfPage = visible + scrollY >= pageHeight
      this.bottom = bottomOfPage || pageHeight < visible
    },
    // 显示二级标签内容
    showSeLabel (index) {
      this.openAllLabelIndex = index
      this.openAllLabelShow = this.openAllLabel[index].childList
    },
    selectAll () {
      this.publicData = []
      this.pageNumberPublic = 1
      this.selecttagid = -999
      this._getPublicDataSetList()
      this.$router.push({ path: '/dataset', query: { active: 1, category: 'ALL' } })
    },
    selectDataSetType (type) {
      this.finished = false
      this.curSelectedMyDataSet = type
      this.hasNextPage = false
      this.hasNextPagePublic = false
      this.myData = []
      this.pageNumber = 1
      if (type === 0) {
        this._getDataSetList()
      } else {
        this._getUserDataSet(type)
      }
    },
    // 选中过滤标签
    selectFilterLabel (item) {
      this.labelVisible = false
      this.publicData = []
      this.pageNumberPublic = 1
      this.$router.push({ path: '/dataset', query: { active: 1, category: item.id } })
      this.selecttagid = item.id
      this._getPublicDataSetList()
      let isHas = false
      this.topFive.forEach(list => {
        if (list.id === item.id) isHas = true
      })
      if (!isHas && this.topFive.length === 5) {
        this.topFive.push(item)
      } else if (!isHas && this.topFive.length === 6) {
        this.topFive.pop()
        this.topFive.push(item)
      }
    },
    // 获取关联最多的5个标签
    _getTopFiveRelationCategory () {
      const data = qs.stringify({
        type: 2
      })
      getTopFiveRelationCategory(data).then(res => {
        if (res.message.code === 0) {
          this.topFive = res.data
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    },
    // 获取分类树信息
    _getCategoryTreeByType () {
      const type = 1
      getCategoryTreeByType(type).then(res => {
        if (res.message.code === 0) {
          this.openAllLabel = res.data
          if (res.data.length > 0 && res.data[0].childList) this.openAllLabelShow = res.data[0].childList
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    },
    // 获取公开数据集列表
    _getPublicDataSetList () {
      let query = ''
      if (this.selecttagid === -999) {
        query = `?pageNumber=${this.pageNumberPublic}&pageSize=${this.pageSizePublic}`
      } else {
        query = `?categoryId=${this.selecttagid}&pageNumber=${this.pageNumberPublic}&pageSize=${this.pageSizePublic}`
      }
      this.finished = true
      this.loadState = true
      optionalDataSetExceptOwn(query).then(res => {
        this.loadState = false
        this.loadingMorePublic = false
        if (res.message.code === 0) {
          this.hasNextPagePublic = res.data.hasNextPage
          this.publicData = this.publicData.concat(res.data.list)
          this.totalNum = res.data.total
          if (this.hasNextPagePublic) {
            this.finished = false
          }
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    },
    // 获取数据集列表
    _getDataSetList () {
      let query = `?cp=${this.pageNumber}&ps=${this.pageSize}`
      this.loadState = true
      getDataSet(query).then(res => {
        this.loadState = false
        this.loadingMore = false
        if (res.message.code === 0) {
          this.hasNextPage = res.data.hasNextPage
          this.myData = this.myData.concat(res.data.list)
          if (!this.hasNextPage) {
            this.finished = true
          }
        } else {
          this.finished = true
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    },
    // 获取我的数据集列表(用户所有和用户关注的)
    _getUserDataSet (type) {
      if (this.pageNumber > 1 && this.myData.length === 0) return false
      let query = type === '' ? `?pageNumber=${this.pageNumber}&pageSize=${this.pageSize}` : `?pageNumber=${this.pageNumber}&pageSize=${this.pageSize}&dataSetType=${type}`
      this.loadState = true
      getUserDataSet(query).then(res => {
        this.loadState = false
        this.loadingMore = false
        if (res.message.code === 0) {
          this.hasNextPage = res.data.hasNextPage
          this.myData = this.myData.concat(res.data.list)
          this.myData = [...new Set(this.myData)]
          if (!this.hasNextPage) {
            this.finished = true
          }
        } else {
          this.finished = true
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    },
    ...mapMutations({
      storeDataSet: 'SET_CUR_DATASET'
    })
  },
  beforeMount () {
    window.addEventListener('scroll', this.handleScroll)
  },
  mounted () {
    if (this.$route.query.active && Number(this.$route.query.active) === 2) {
      this.toggleActive(2)
    } else {
      this.toggleActive(1)
    }
  },
  watch: {
    bottom: function (bottom) {
      if (this.finished === true) {
        return
      }
      if (bottom) {
        if (this.activeTab === 1) {
          this.loadingMorePublic = true
          this.pageNumberPublic++
          this._getPublicDataSetList()
        } else {
          this.loadingMore = true
          this.pageNumber++
          if (this.curSelectedMyDataSet === 0) {
            this._getDataSetList()
          } else {
            this._getUserDataSet(this.curSelectedMyDataSet)
          }
        }
      }
    }
  },
  components: {
    loadData
  },
  destroyed () {
    window.removeEventListener('scroll', this.handleScroll)
  }
}
</script>

<style lang="stylus" scoped>
.data-set
  display flex
  flex-flow column
  .header
    background #f4f7f8
    .header-content-box
      display flex
      width 100%
      margin 0 auto
      max-width 1162px
      padding 20px 0
      .header-left
        width 50%
        .title
          font-weight 600
          font-size 28px
          color #2D323B
          letter-spacing 0
          overflow hidden
          text-overflow ellipsis
          white-space nowrap
      .header-right
        width 50%
        .action-box
          display flex
          justify-content flex-end
    .nav-list
      width 100%
      position relative
      margin 0 auto
      max-width 1162px
      display flex
      .main-nav-list
        height 100%
        .main-nav-list-container
          display flex
          height 100%
          align-items flex-end
          .icon
            display inline-block
            width 30px
            height 50px
          .icon-open-ico
            background url(../../common/image/icon-project/data-set--left-ico-no.png) no-repeat center
            background-size 16px 16px
          .icon-my-ico
            background url(../../common/image/icon-project/data-set-two-ico-no.png) no-repeat center
            background-size 16px 16px
          .nav-item
            padding 0 10px
            font-weight 600
            font-size 14px
            display flex
            color #666
            justify-content center
            align-items center
            cursor pointer
            position relative
            margin 0
            >a
              color #666
              text-decoration none
              cursor pointer
            >a:before
              content ''
              position absolute
              top 0
              right 0
              bottom 0
              left 0
          .link-item
            padding 0 15px
            height 44px
        .nav-item.active
          font-weight bold
          color #2d323b
          background #fff
          box-shadow 0 14px 0 -10px #f3c922 inset
          border-radius 5px 5px 0 0
          .icon-open-ico
            background url(../../common/image/icon-project/data-set--left-ico.png) no-repeat center
            background-size 16px 16px
          .icon-my-ico
            background url(../../common/image/icon-project/data-set-two-ico.png) no-repeat center
            background-size 16px 16px
    .nav-left
      width 50%
    .nav-right
      width 50%
      display flex
      align-items center
      justify-content flex-end
      .header-button
        >button
          font-size 14px
          padding 4px 12px
  .content
    width 100%
    margin 0 auto
    max-width 1162px
    padding 20px 0
    .category-header
      padding 10px 0 20px
      .category-item
        display inline-block
        font-size 14px
        color #8D9091
        color #555
        margin-right 22px
        cursor pointer
        &:hover
          color #2196f3
      .datast-total
        z-index 20
        color #555
        display inline-block
        font-size 14px
        float right
      .active-category
        color #2196f3
    .data-list
      font-size 0
      .item
        display inline-block
        width 270px
        margin-left 27px
        margin-bottom 26px
        background #fff
        border 1px solid #E8E8E8
        border-radius 4px
        overflow hidden
        cursor pointer
        &:hover
          box-shadow 0 0 10px 0 rgba(74, 74, 74, 0.15)
        .img-wra
          position relative
          width 100%
          height 160px
          .image
            display block
            width 100%
            height 100%
          .category
            position absolute
            bottom 12px
            left 14px
            z-index 1
            font-size 0
            .list
              display inline-block
              height 24px
              line-height 24px
              padding 0 8px
              margin-right 10px
              font-size: 12px
              color #FFFFFF
              background rgba(45, 50, 59, 0.35)
              border-radius 4px
        .name-pro
          padding 16px 0
          padding-left 15px
          line-height 22px
          font-size 16px
          color #2D323B
          font-weight 600
        .desc
          height 36px
          padding 0 15px
          line-height 18px
          font-size 14px
          color #8e9091
          overflow hidden
          text-overflow ellipsis
          display -webkit-box
          /*! autoprefixer: off */
          -webkit-box-orient vertical
          /* autoprefixer: on */
          -webkit-line-clamp 2
          word-break break-all
          word-wrap break-word
        .tag-types
          width 100%
          padding 21px 15px 23px 15px
          font-size 0
          .types
            display inline-block
            height 17px
            padding-right 14px
            font-size 0
            .icon-type
              display inline-block
              width 14px
              height 17px
              margin-right 2px
              background url(../../common/image/icon/use-num.png) no-repeat center
              background-size 10px 14px
            .icon-type2
              background url(../../common/image/icon/icon-start.png) no-repeat center
              background-size 14px 14px
            .txt
              display inline-block
              height 17px
              line-height 18px
              font-size 12px
              color #666666
              vertical-align top
        .tag-foot
          width 100%
          padding 21px 15px 23px 15px
          font-size 0
          .foot-item
            display inline-block
            height 17px
            padding-right 20px
            font-size 0
            .icon-foot-item
              display inline-block
              width 14px
              height 17px
              background url(../../common/image/icon/icon-open.png) no-repeat center
              background-size 14px 14px
              vertical-align top
            .icon-foot-item-pri
              background url(../../common/image/icon/private.png) no-repeat center
              background-size 13px 14px
            .icon-foot-item-num
              background url(../../common/image/icon/icon-use.png) no-repeat center
              background-size 10px 14px
            .txt
              display inline-block
              height 17px
              line-height 18px
              padding-left 3px
              font-size 12px
              color #666666
      .item:nth-child(4n+1)
        margin-left 0
    .loadmore
      display flex
      align-items center
      justify-content center
      height 50px
      .loadmore-box
        height 40px
        line-height 40px
        font-size 16px
        width 50%
        display flex
        align-items center
        justify-content center
        background #f5f7fa
        cursor pointer
    .no-data
      display flex
      align-items center
      justify-content center
.dataset-popover
  width 100%
  display flex
  .navs-detail-left
    flex 0 0 120px
    padding-top 10px
    background #F4F7F8
    .item
      height 32px
      line-height 32px
      text-indent 10px
      font-size 16px
      font-weight 600
      cursor pointer
      &:hover
        // background #d2d2d2
        color #2296f3
    .active
      color #2296f3
  .navs-detail-right
    flex 1
    padding-top 10px
    .items
      width 100%
      display flex
      .tit
        flex 0 0 140px
        height 32px
        line-height 32px
        text-align left
        padding 0 10px
        font-size 14px
        font-weight 600
      .detail-items
        flex 1
        font-size 0
        .detail-item
          display inline-block
          padding-left 6px
          padding-right 6px
          height 32px
          line-height 32px
          font-size 14px
          color #6E6E6E
          cursor pointer
          &:hover
            color #2196f3
        .active-category
          color #2196f3
.project-mask
  position fixed
  top 68px
  right 0
  bottom 0
  left 0
  z-index 11
  background transparent
.dataset-navs-detail
  position relative
  &:after
    content: '';
    position: absolute;
    top: 4px;
    right: -14px;
    display: block;
    width: 0;
    height: 0;
    border-top: 8px solid #555;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
</style>
